<template>
  <div>
    <div id="pie1"></div>
  </div>
</template>

  <script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("pie1"));

      var seriesData = [
        {
          name: "好评",
          value: 3321,
          rate: 40
        },
        {
          name: "差评",
          value: 4544,
          rate: 50
        },
        {
          name: "一般评论",
          value: 7899,
          rate: 60
        }
      ];
      var optionRich = {
        a: {
          width: 60,
          fontSize: 18,
          fontWeight: 400,
          color: "#FFF",
          lineHeight: 20,
          padding: [0, 50, 0, 0]
        }
      };
      var optionColorArr = {
        好评: "#5694FF",
        差评: "#FFCC1A",
        一般评论: "#FF9152"
      };
      seriesData.forEach((ele, i) => {
        optionRich[i] = {
          width: 20,
          fontSize: 18,
          fontWeight: 400,
          lineHeight: 20,
          color: optionColorArr[ele.name],
          align: "center",
          padding: [0, 0, 0, 20]
        };
      });

      this.chart.setOption({
        color: seriesData.map(item => optionColorArr[item.name]),
        title: {
          text: `{a| 总数 }`,
          textStyle: {
            rich: {
              a: {
                fontSize: 22,
                color: "#FFF"
              }
            }
          },
          subtext: `{a|${100 + "个"}}`,
          subtextStyle: {
            rich: {
              a: {
                fontSize: 28,
                color: "#FFF",
                padding: [0, 0, 0, -5]
              }
            }
          },
          x: "20%",
          y: "45%"
        },
        tooltip: {
          trigger: "item",
          show: true,
          formatter: params => {
            const { data, name, value } = params;
            return `
               <div style="color: ${params.color}; font-size: 18px;">${name}&nbsp;&nbsp;&nbsp;<span style="font-size: 20px; color: #000; float: right;">${value}</span></div>
               <div style="color: ${params.color}; font-size: 17px;">占比&nbsp;<span style="font-size: 20px; color: #000; float: right;">${data.rate}%</span></div>
            `;
          }
        },
        grid: {
          top: "0",
          left: "0",
          right: "0",
          bottom: "0",
          containLabel: true
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "50%",
          align: "left",
          top: "middle",
          icon: "circle",
          itemHeight: 15,
          itemWidth: 15,
          itemGap: 20,
          height: 300,
          formatter: function(name) {
            let index = 0;
            let value = 0;
            let rate = 0;
            seriesData.forEach((item, i) => {
              if (item.name == name) {
                value = item.value ? item.value : 0;
                rate = item.rate ? item.rate : 0;
                index = i;
              }
            });
            return `{a|${name}}{${index}|${rate +
              "%"}}{${index}|${"|"}}{${index}|${value}}`;
          },
          textStyle: {
            rich: optionRich
          }
        },
        series: [
          {
            type: "pie",
            center: ["25%", "50%"],
            radius: ["40%", "60%"],
            clockwise: true, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            data: seriesData
          }
        ]
      });
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

  <style lang="scss" scoped>
#pie1 {
  width: 90%;
  height: 40vh;
}
</style>